<template>
  <div>
    <el-form v-show="sourceFrom=='1'" ref="form" :inline="true" :model="value" size="small" label-width="80px">
      <el-form-item label="客户名称">
        <el-input v-model="value.accident.customerName" style="width: 490px"/>
      </el-form-item>
      <el-form-item label="报修地址" >
        <el-input v-model="value.accident.address" style="width: 490px"/>
      </el-form-item>
      <el-form-item label="故障描述">
        <el-input v-model="value.accident.faultDesc" style="width: 490px;" rows="5" type="textarea"/>
      </el-form-item>
      <el-form-item label="服务等级" prop="serviceLevel">
        <el-select v-model="value.orderParam.serviceLevel" clearable class="filter-item">
          <el-option v-for="item in serviceLevelOptions" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="故障类型" >
        <el-select v-model="value.orderParam.faultType" clearable class="filter-item">
          <el-option v-for="item in faultTypeOptions" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="服务商" prop="supplier">
        <el-select v-model="value.orderParam.supplier" clearable class="filter-item">
          <el-option v-for="item in supplierOptions" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="绑定合同" >
        <el-select v-model="value.orderParam.contractId" clearable class="filter-item">
          <el-option v-for="item in contractOptions" :key="item.id" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="上门时间" prop="addriveTime">
        <el-date-picker
            v-model="value.orderParam.addriveTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间" style="width: 200px;">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="服务时长" prop="serviceTime">
        <el-input-number v-model.number="value.orderParam.serviceTime" :min="0" :max="999" controls-position="right" style="width: 200px;"/>
      </el-form-item>
      <el-form-item label="所需工具" >
        <el-input v-model="value.orderParam.requireTool" style="width: 490px;" rows="5" type="textarea"/>
      </el-form-item>
      <el-form-item label="备注" >
        <el-input v-model="value.orderParam.notes" style="width: 490px;" rows="5" type="textarea"/>
      </el-form-item>
    </el-form>

    <el-form v-show="sourceFrom=='2'" ref="form" :inline="true" :model="value" size="small" label-width="80px">
      <el-form-item label="任务名称"  prop="taskTitle">
        <el-input v-model="value.task.taskTitle" style="width: 490px;"/>
      </el-form-item>
      <el-form-item label="任务内容" prop="taskContent">
        <el-input v-model="value.task.taskContent" style="width: 490px;" rows="5" type="textarea"/>
      </el-form-item>
      <el-form-item label="服务等级" prop="serviceLevel">
        <el-select v-model="value.orderParam.serviceLevel" class="filter-item">
          <el-option v-for="item in serviceLevelOptions" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="故障类型" >
        <el-select v-model="value.orderParam.faultType" class="filter-item">
          <el-option v-for="item in faultTypeOptions" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="服务商" prop="supplier">
        <el-select v-model="value.orderParam.supplier" class="filter-item">
          <el-option v-for="item in supplierOptions" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="绑定合同" >
        <el-select v-model="value.orderParam.contractId" clearable class="filter-item">
          <el-option v-for="item in contractOptions" :key="item.id" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="上门时间" prop="addriveTime">
        <el-date-picker
            v-model="value.orderParam.addriveTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间" style="width: 200px;">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="服务时长" prop="serviceTime">
        <el-input-number v-model.number="value.orderParam.serviceTime" :min="0" :max="999" controls-position="right" style="width: 200px;"/>
      </el-form-item>
      <el-form-item label="所需工具" >
        <el-input v-model="value.orderParam.requireTool" style="width: 490px;" rows="5" type="textarea"/>
      </el-form-item>
      <el-form-item label="备注" >
        <el-input v-model="value.orderParam.notes" style="width: 490px;" rows="5" type="textarea"/>
      </el-form-item>
    </el-form>

  <el-form v-show="sourceFrom=='3'" ref="form" :inline="true" :model="value" size="small" label-width="100px">
    <el-form-item label="计划名称" >
      <el-input v-model="value.inspection.planName" style="width: 490px;"/>
    </el-form-item>
    <el-form-item label="巡检对象" >
      <el-input v-model="value.inspection.objName" style="width: 490px;"/>
    </el-form-item>
    <el-form-item label="服务等级" prop="serviceLevel">
        <el-select v-model="value.orderParam.serviceLevel" clearable class="filter-item">
          <el-option v-for="item in serviceLevelOptions" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="故障类型" >
        <el-select v-model="value.orderParam.faultType" clearable class="filter-item">
          <el-option v-for="item in faultTypeOptions" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="服务商" prop="supplier">
        <el-select v-model="value.orderParam.supplier" clearable class="filter-item">
          <el-option v-for="item in supplierOptions" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="绑定合同" >
        <el-select v-model="value.orderParam.contractId" clearable class="filter-item">
          <el-option v-for="item in contractOptions" :key="item.id" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="上门时间" prop="addriveTime">
        <el-date-picker
            v-model="value.orderParam.addriveTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间" style="width: 200px;">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="服务时长" prop="serviceTime">
        <el-input-number v-model.number="value.orderParam.serviceTime" :min="0" :max="999" controls-position="right" style="width: 200px;"/>
      </el-form-item>
      <el-form-item label="所需工具" >
        <el-input v-model="value.orderParam.requireTool" style="width: 490px;" rows="5" type="textarea"/>
      </el-form-item>
      <el-form-item label="备注" >
        <el-input v-model="value.orderParam.notes" style="width: 490px;" rows="5" type="textarea"/>
      </el-form-item>
  </el-form>

    <div style="text-align: right">
        <el-button type="primary" v-show="isAdd" @click="handlePrev">上一步</el-button>
        <el-button :loading="loading" v-show="isAdd" type="primary" @click="handleSubmit">确认</el-button>
        <el-button type="text" @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import { add, edit } from '@/api/tWorkOrder'
import { mapGetters } from 'vuex'
import picForm from '../../../../tools/picture/module/form'
import { del } from '@/api/picture'
import { getToken } from '@/utils/auth'
import { get } from '@/api/dictDetail'
export default {
  name: "OrderInfo",
  props: {
    value: Object,
    isAdd: {
      type: Boolean,
      required: true
    },
    sourceFrom: {
      type: String,
      required: true,
      default: "1"
    },
    sup_this: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      loading: false, dialog: false,faultDevices:[],
      devices: [],
      serviceLevelOptions:[],
      faultTypeOptions:[],
      supplierOptions:[],
      contractOptions:[],
      dialogImageUrl: '',
      dialogVisible: false,
      headers: {
        'Authorization': 'Bearer ' + getToken()
      },
    }
  },
  computed: {
    ...mapGetters([
      'imagesUploadApi'
    ])
  },
  mounted() {
    // 加载数据字典
    this.getDict("fault_type")
    this.getDict("service_level")
    this.getSupplier()
  },
  methods: {
    getDict(name) {
      return new Promise((resolve, reject) => {
        get(name).then(res => {
          if(name=='fault_type'){
            const content = [].concat(res.content);
            const _this = this
            content.forEach(function(data, index) {
              const faultTypeOption = {id: data.id,name: data.label}
              _this.faultTypeOptions.push(faultTypeOption)
            })
          }
          else {
            const content = [].concat(res.content);
            const _this = this
            content.forEach(function(data, index) {
              const serviceLevelOption = {id: data.id,name: data.label}
              _this.serviceLevelOptions.push(serviceLevelOption)
            })
            console.log(this.serviceLevelOptions)
          }
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    },
    getSupplier() {
       request({
          url: 'api/tServiceproviderInfoAll',
          method: 'get'
        }).then(res => {
          const content = [].concat(res);
          const _this = this
          content.forEach(function(data, index) {
              const supplierOptions = {id: data.id,name: data.seproRefeName}
              _this.supplierOptions.push(supplierOptions)
            })
        }).catch(err => {
          console.log(err)
        })  
    },
    handleSelect(item) {
      this.getEquipment();
    },
    getEquipment(){
      const params = {
        //customerName:queryString
      }
      request({
        url: 'api/tEquipment',
        method: 'get',
        params
      }).then(res => {
       this.devices = [].concat(res.content);
      }).catch(err => {
        console.log(err.response.data.message)
      })  
    },
    handlePrev() {
      this.$emit('prevStep')
    },
    cancel() {
      this.resetForm()
    },
    handleSubmit() {
      this.$emit('doSubmit');
    },
    cancel() {
      this.$emit('cancel');
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
     handlePreview(file) {
      document.location.href = file.url
    },
    handleSuccess(response, file, fileList) {
      const uid = file.uid
      const id = response.data[0]
      this.files.push({ uid, id })
    },
    handleBeforeRemove(file, fileList) {
      const _this = this
      for (let i = 0; i < this.files.length; i++) {
        if (this.files[i].uid === file.uid) {
          del(this.files[i].id).then(res => { 
            _this.pictures.splice(i,1)
          })
          return true
        }
      }
    },
    // 监听上传失败
    handleError(e, file, fileList) {
      const msg = JSON.parse(e.message)
      this.$notify({
        title: msg.message,
        type: 'error',
        duration: 2500
      })
    }
  }
}
</script>

<style scoped>
 
</style>